// eslint-disable-next-line no-use-before-define
import React, { useRef, useState } from "react";
import { Tooltip } from "antd";
import { useDrag, useDrop } from "react-dnd";

interface Props {
  data: any;
  index: number;
  classname: string;
  moveCard: (dragIndex: React.ReactText, hoverIndex: any) => void;
  dragEnd: () => void;
  onClick: () => void;
  updateAndDel: ({ type, item }: { type: string; item: any }) => void;
}

const type = { list: "qrlist" };

const TopicList = ({
  data,
  index,
  classname,
  moveCard,
  dragEnd,
  onClick,
  updateAndDel,
}: Props) => {
  let timer: any;
  /* 显示更多操作 */
  const [visible, setVisible] = useState(false);
  /* 显示更多操作按钮 */
  const [visibleMore, setVisibleMore] = useState(false);
  const ref: any = useRef(null);

  const [, drop] = useDrop({
    // 定义拖拽的类型
    accept: type.list,
    hover(item: any, monitor) {
      //   console.log(item, monitor, ref.current);

      // 异常处理判断
      if (!ref.current) {
        return;
      }
      // 拖拽目标的Index
      const dragIndex = item.index;
      // 放置目标Index
      const hoverIndex = index;
      // 如果拖拽目标和放置目标相同的话，停止执行
      if (dragIndex === hoverIndex) {
        return;
      }

      // 如果不做以下处理，则卡片移动到另一个卡片上就会进行交换，下方处理使得卡片能够在跨过中心线后进行交换.
      // 获取卡片的边框矩形
      const hoverBoundingRect = ref.current.getBoundingClientRect();
      //   console.log(hoverBoundingRect);

      // 获取X轴中点
      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
      // 获取拖拽目标偏移量
      const clientOffset: any = monitor.getClientOffset();

      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
      // 从上往下放置
      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
        return;
      }
      // 从下往上放置
      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
        return;
      }
      moveCard(dragIndex, hoverIndex); // 调用方法完成交换
      item.index = hoverIndex; // 重新赋值index，否则会出现无限交换情况
    },
  });

  const [{ isDragging }, drag] = useDrag({
    item: { type: type.list, id: data.id, index },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });

  drag(drop(ref));
  return (
    <li
      ref={ref}
      style={{ opacity: isDragging ? 0 : 1 }}
      onClick={onClick}
      className={classname}
      onMouseLeave={() => {
        setVisibleMore(false);
      }}
      onMouseOver={() => {
        setVisibleMore(true);
      }}
      onDragEnd={() => {
        dragEnd();
      }}>
      <p className="flex justify-between items-center h-40 text-grey-800">
        <span>{data.name}</span>
        <span className="text-grey-300">{data && data.count}</span>
      </p>
      <div className="absolute top-2/4 right-5 transform -translate-y-2/4">
        <Tooltip
          color="#fff"
          placement="right"
          visible={visible}
          title={
            <p
              className="flex flex-col p-0 text-grey-850 m-0"
              onMouseLeave={() => {
                timer = setTimeout(() => {
                  setVisible(false);
                }, 300);
              }}
              onMouseOver={() => {
                clearTimeout(timer);
                setVisible(true);
              }}>
              <span
                className="m-0 cursor-pointer hover:bg-blue-effaff inline-block py-6 px-10 border-b-1 border-solid border-grey-400"
                onClick={(e: any) => {
                  setVisible(false);
                  updateAndDel({ type: "update", item: data });
                  e.stopPropagation();
                }}>
                修改名称
              </span>
              <span
                className="m-0 cursor-pointer hover:bg-blue-effaff inline-block py-6 px-10"
                onClick={(e: any) => {
                  setVisible(false);
                  updateAndDel({ type: "delate", item: data });
                  e.stopPropagation();
                }}>
                删除分组
              </span>
            </p>
          }>
          <i
            className={`iconfont icon-gengduo text-grey-800 ${visibleMore ? "" : "none"}`}
            onMouseLeave={() => {
              timer = setTimeout(() => {
                setVisible(false);
              }, 300);
            }}
            onMouseOver={() => {
              clearTimeout(timer);
              setVisible(true);
            }}></i>
        </Tooltip>
      </div>
    </li>
  );
};
export default TopicList;
